<template>
	<view :class="['v-title', `v-title--level-${level}`]" :style="titleStyle">
		<slot></slot>
	</view>
</template>

<script lang="ts" setup>
import { computed,inject } from 'vue';

const props = defineProps({
	level: {
		type: Number,
		default: 1,
		validator: (val: number) => val >= 1 && val <= 6
	},
	fontSize: {
		type: String,
		default: ''
	},
	color: {
		type: String,
		default: ''
	}
});

const config = inject<any>('config');
const titleStyle = computed(() => {
	const style: Record<string, string> = {};
	if (props.fontSize) {
		style['font-size'] = props.fontSize;
	}
	if (props.color) {
		style['color'] = props.color;
	}
	return style;
});
</script>

<style lang="scss" scoped>
.v-title {
	font-weight: bold;

	&--level-1 {
		font-size: v-bind("config.fontSize.largeTitle");
		color: v-bind("config.fontColor.mianTitle");
	}

	&--level-2 {
		font-size: v-bind("config.fontSize.mediumTitle");
		color: v-bind("config.fontColor.mianTitle");
	}

	&--level-3 {
		font-size: v-bind("config.fontSize.smallTitle");
		color: v-bind("config.fontColor.mianTitle");
	}

	&--level-4 {
		font-size: v-bind("config.fontSize.largeText");
		color: v-bind("config.fontColor.subTitle");
	}

	&--level-5 {
		font-size: v-bind("config.fontSize.mediumText");
		color: v-bind("config.fontColor.subTitle");
	}

	&--level-6 {
		font-size: v-bind("config.fontSize.smallText");
		color: v-bind("config.fontColor.subTitle");
	}

	@media (prefers-color-scheme: dark) {
		&--level-1,
		&--level-2,
		&--level-3 {
			color: #e0e0e0;
		}

		&--level-4,
		&--level-5,
		&--level-6 {
			color: #b0b0b0;
		}

		:deep(.v-title) {
			color: #e0e0e0;
		}
	}
}
</style>
